<template>
  <view class="page-container">
    <!-- 顶部装饰元素 -->
    <view class="top-decoration"></view>

    <!-- 主卡片 -->
    <view class="card">
      <view class="card-header">
        <text class="title">账号激活</text>
        <text class="subtitle">仅支持数据库已存在的手机号设置密码</text>
      </view>

      <view class="form-container">
        <!-- 手机号输入框 -->
        <view class="input-group">
          <view class="input-icon">
            <uni-icons type="phone" size="24" color="#606266"></uni-icons>
          </view>
          <input
            v-model="phone"
            type="number"
            maxlength="11"
            placeholder="请输入已登记的手机号"
            class="input-field"
            @focus="onInputFocus('phone')"
            @blur="onInputBlur('phone')"
          />
        </view>

        <!-- 密码输入框（仅此处改为 password 类型，隐藏明文） -->
        <view class="input-group">
          <view class="input-icon">
            <uni-icons type="lock" size="24" color="#606266"></uni-icons>
          </view>
          <input
            v-model="pwd"
            type="password"
            maxlength="20"
            placeholder="请设置密码（至少6位）"
            class="input-field"
            @focus="onInputFocus('pwd')"
            @blur="onInputBlur('pwd')"
          />
        </view>

        <!-- 激活按钮 -->
        <button 
          class="register-btn" 
          @click="handleReg"
          :class="{ disabled: !canRegister }"
          :disabled="!canRegister"
        >
          激活账号
        </button>

        <!-- 底部文字 -->
        <view class="footer-text">
          <text>账号已激活？</text>
          <text class="login-link" @click="navigateToLogin">立即登录</text>
        </view>
      </view>
    </view>

    <!-- 底部装饰元素 -->
    <view class="bottom-decoration"></view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      pwd: '',
      focusedInput: ''
    };
  },
  computed: {
    canRegister() {
      return this.phone.trim() &&
             this.pwd.trim() &&
             this.phone.length === 11 &&
             this.pwd.length >= 6;
    }
  },
  methods: {
    onInputFocus(inputName) { this.focusedInput = inputName; },
    onInputBlur() { this.focusedInput = ''; },

    /* 处理账号激活 */
    handleReg() {
      /* 1. 前端校验 */
      if (!/^1[3-9]\d{9}$/.test(this.phone)) {
        this.showToast('手机号格式错误');
        return;
      }
      if (this.pwd.length < 6) {
        this.showToast('密码至少6位');
        return;
      }

      /* 2. 加载中 */
      uni.showLoading({ title: '激活中...', mask: true });

      /* 3. 调用后端接口 */
      uni.request({
        url: 'http://localhost:8080/api/student/register',
        method: 'POST',
        header: { 'Content-Type': 'application/x-www-form-urlencoded' },
        data: {
          phone: this.phone.trim(),
          password: this.pwd.trim()
        },
        // 修改错误处理部分
        success: (res) => {
          const body = res.data;
          console.log('后端返回数据:', body); // 增加调试日志
          
          if (body.code === 200 || body.code === 0) {
            uni.showToast({ title: '激活成功', icon: 'success' });
            setTimeout(() => this.navigateToLogin(), 800);
          } else {
            // 显示更详细的错误信息
            const errorMsg = body.msg || `激活失败 ( ${body.message || '未知'})`;
            this.showToast(errorMsg);
            
            // 保留原有的特定错误处理
            if (body.code === 1001) {
              console.log('学生不存在');
            } else if (body.code === 1002) {
              console.log('学生已激活');
            }
          }
        },
        fail: () => this.showToast('网络连接错误'),
        complete: () => uni.hideLoading()
      });
    },

    showToast(msg) {
      uni.showToast({ title: msg, icon: 'none' });
    },

    navigateToLogin() {
      uni.navigateTo({ url: '/pages/login/index' });
    }
  }
};
</script>

<style scoped>
.page-container {
  min-height: 100vh;
  background-color: #f5f7fa;
  position: relative;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 装饰元素 */
.top-decoration {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200rpx;
  background: linear-gradient(135deg, #4749a1 0%, #5b61b9 100%);
  border-bottom-right-radius: 100rpx;
  border-bottom-left-radius: 100rpx;
  z-index: 1;
}

.bottom-decoration {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 150rpx;
  background: linear-gradient(135deg, #4749a1 0%, #5b61b9 100%);
  border-top-right-radius: 100rpx;
  border-top-left-radius: 100rpx;
  z-index: 1;
  opacity: 0.9;
}

/* 卡片样式 */
.card {
  width: 90%;
  max-width: 500rpx;
  background-color: #fff;
  border-radius: 30rpx;
  box-shadow: 0 15rpx 50rpx rgba(0, 0, 0, 0.1);
  padding: 60rpx 40rpx;
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
}

.card:hover {
  transform: translateY(-5rpx);
}

/* 卡片头部 */
.card-header {
  text-align: center;
  margin-bottom: 60rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 15rpx;
  display: block;
}

.subtitle {
  font-size: 28rpx;
  color: #666;
  opacity: 0.8;
}

/* 表单样式 */
.form-container {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}

.input-group {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 15rpx;
  padding: 0 20rpx;
  transition: all 0.3s ease;
}

.input-group:focus-within {
  border-color: #4749a1;
  box-shadow: 0 0 0 3rpx rgba(71, 73, 161, 0.1);
}

.input-icon {
  padding-right: 20rpx;
  color: #606266;
}

.input-field {
  flex: 1;
  height: 90rpx;
  border: none;
  outline: none;
  font-size: 32rpx;
  padding: 0;
  color: #333;
}

.input-field::placeholder {
  color: #c0c4cc;
  font-size: 30rpx;
}

/* 按钮样式 */
.register-btn {
  background: linear-gradient(135deg, #4749a1 0%, #5b61b9 100%);
  color: #fff;
  border-radius: 45rpx;
  height: 96rpx;
  font-size: 34rpx;
  font-weight: 500;
  letter-spacing: 2rpx;
  margin-top: 30rpx;
  transition: all 0.3s ease;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.register-btn:not(.disabled):hover {
  opacity: 0.95;
  transform: translateY(-2rpx);
  box-shadow: 0 10rpx 20rpx rgba(71, 73, 161, 0.2);
}

.register-btn.disabled {
  background: #ccc;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* 底部文字 */
.footer-text {
  display: flex;
  justify-content: center;
  margin-top: 40rpx;
  font-size: 28rpx;
  color: #666;
}

.login-link {
  color: #4749a1;
  margin-left: 10rpx;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 5rpx;
}
</style>